<%--
  Created by IntelliJ IDEA.
  User: 张荣荣
  Date: 2022/3/6
  Time: 19:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>车辆详情</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/image/smallLogo.svg" type="image/x-icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/car_detail.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/car_detail.js"></script>

    <style>
        <%--        悬浮在a标签上会出现的效果--%>
        .cus_title .logo .title_list li a:hover + span {
            background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
            background-size: 12px 6px;
        }

        /*给a标签上色*/
        .cus_title .logo .title_list li .own_car {
            color: #23b7b7 !important;
        }


        .hasPraise {
            color: #ff6633
        }

        /*给span标签加三角形*/
        .cus_title .logo .title_list li .by_car {
            background-image: url("${pageContext.request.contextPath}/image/list_buttom.png");
            background-size: 12px 6px;
        }
    </style>

</head>
<body>

<%--${carDetailVo.review_memberId}--%>
<%--${pianhao}--%>
<%--1.页头--%>
<jsp:include page="../common/head.jsp"/>

<div class="detail_info ">
    <div class="layui-container col">
        <div class="layui-row">
            <!--            左侧-->
            <div class="layui-col-md8">
                <div class="car_name">
                    <h1>${carDetailVo.car.carBrand}${carDetailVo.car.carName}${carDetailVo.car.carType}</h1>
                </div>

                <!--                          轮播图-->
                <div class="layui-carousel more_images" id="test10">
                    <div carousel-item="" class="car_detail_imgs">
                        <c:forEach var="carImagevo" items="${carDetailVo.carImgList}">
                            <div><img src="${pageContext.request.contextPath}/${carImagevo.carImgImages}"></div>
                        </c:forEach>
                        <%--                        <div><img src="${pageContext.request.contextPath}/image/car_detail_01.webp"></div>--%>
                        <%--                        <div><img src="${pageContext.request.contextPath}/image/car_detail_02.webp"></div>--%>
                        <%--                        <div><img src="${pageContext.request.contextPath}/image/car_detail_03.webp"></div>--%>
                        <%--                        <div><img src="${pageContext.request.contextPath}/image/car_detail_04.webp"></div>--%>
                        <%--                        <div><img src="${pageContext.request.contextPath}/image/car_detail_05.webp"></div>--%>
                        <%--                        <div><img src="${pageContext.request.contextPath}/image/car_detail_06.webp"></div>--%>
                        <%--                        <div><img src="${pageContext.request.contextPath}/image/car_detail_01.webp"></div>--%>
                    </div>
                </div>


                <!--  详细信息              -->

                <div>
                    <ul class="detail_info_text">
                        <li>
                            <span>变速箱：</span>
                            <span>自动</span>
                        </li>
                        <li>
                            <span>油箱容量：</span>
                            <span>40</span>
                            <span>L</span>
                        </li>
                        <li>
                            <span>排量：</span>
                            <span>${carDetailVo.car.carEngineCapcity}</span>
                            <span>L</span>
                        </li>
                        <li>
                            <span>座位数：</span>
                            <span>${carDetailVo.car.carSeatCount}</span>
                            <span>座</span>
                        </li>
                        <li>
                            <span>进气：</span>
                            <span>自然进气</span>
                        </li>
                    </ul>
                </div>
                <div class="car_appraise">

                    <h4 class="title">车辆评价</h4>
                    <span>车辆星级：</span>
                    <div id="test9"></div>
                    <!--         该车全部评价         -->
                    <div class="appraise_detail">
                        <h4 class="title">用户评价</h4>

                        <c:forEach var="carReviewMap" items="${carDetailVo.carReviewMap}">
                            <%--                            <c:set var="reviewId">${carReviewMap.key.reviewId}</c:set>--%>

                            <%--                            ${customer.memberId}--%>

                            <%--                            <c:if var="" test="${carDetailVo.review_memberId.reviewId}">--%>
                            <%--                                <span>拥有</span>--%>
                            <%--                            </c:if>--%>
                            <%--                            <c:set var="id" target="${carReviewMap.key.reviewId}">--%>
                            <%--                                id1: ${carDetailVo.review_memberId.id}--%>
                            <%--                            </c:set>--%>

                            <%--                            ${carDetailVo.review_memberId[carReviewMap.key.reviewId]}--%>


                            <%--                            --%>
                            <%--                            id2: ${carDetailVo.review_memberId[carReviewMap.key.reviewId]}<br>--%>
                            ${carReviewMap.key.reviewId}
                            <div class="layui-row">
                                <div class="layui-col-md2 cust_icon">
                                    <img src="${carReviewMap.value.memberAvatar}">
                                </div>

                                <div class="layui-col-md10">
                                    <div class="appraise_detail_text">
                                        <span>车辆评分：</span>${carReviewMap.key.starShop}
                                            <%--                                        <div id="cots_car1"></div>--%>
                                        <span class="detail">评价：</span>
                                        <div>
                                            <span>${carReviewMap.key.reviewContent}</span>
                                        </div>
                                    </div>
                                    <div class="misc-info">
                                        <span class="time">
                                            <fmt:formatDate value="${carReviewMap.key.reviewDate}"
                                                            pattern="yyyy-MM-dd HH:mm"/>
                                        </span>
                                        <div class="actions">
                                            <c:if test="${!empty customer}">
                                                <a class="praise" href="javascript: ;">
                                                    <i class="i-praise"></i>


                                                        <%--                                                <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                    赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                    </span>--%>
                                                        <%--                                                <span class="praise-number">--%>
                                                        <%--                                                    <input type="hidden" value="${carReviewMap.key.reviewId}"/>--%>
                                                        <%--                                                    赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                </span>--%>


                                                        <%--&lt;%&ndash;                                                    ${carDetailVo.review_memberId[carReviewMap.key.reviewId]}&ndash;%&gt;--%>
                                                        <%--&lt;%&ndash;                                                <c:if test="${carDetailVo.review_memberId[carReviewMap.key.reviewId].contains(10001)}"></c:if>&ndash;%&gt;--%>
                                                        <%--                                                <c:set var="iscontain" value="" />--%>
                                                        <%--                                                <c:set var="exitId" value="10"></c:set>--%>

                                                    <c:set var="isMatch" scope="page">0</c:set>
                                                    <c:forEach var="reviewid"
                                                               items="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}">

                                                        <c:if test="${reviewid eq 0 && isMatch == 0}">
                                                        <span class="praise-number">
                                                            <input type="hidden" value="${carReviewMap.key.reviewId}"/>
                                                            赞( <label
                                                                class="pla">${carReviewMap.key.supportTotal}</label> )
                                                        </span>
                                                        </c:if>

                                                        <c:if test="${customer.memberId eq reviewid}">
                                                            <c:set var="isMatch" scope="page">1</c:set>
                                                            <span class="praise-number hasPraise">
                                                            <input type="hidden" value="${carReviewMap.key.reviewId}"/>
                                                            赞( <label
                                                                    class="pla">${carReviewMap.key.supportTotal+1}</label> )
                                                        </span>
                                                        </c:if>


                                                    </c:forEach>


                                                        <%--                                                <!-- 测试值在集合中 -->--%>
                                                        <%--                                                <c:if test="${iscontain} ">--%>
                                                        <%--                                                    <span class="praise-number hasPraise" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                    已赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                    </span>--%>
                                                        <%--                                                </c:if>--%>
                                                        <%--                                                　　<!-- 测试值不在集合中 -->--%>
                                                        <%--                                                <c:if test="${!iscontain}">--%>
                                                        <%--                                                    <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                    赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                    </span>--%>
                                                        <%--                                                </c:if>--%>

                                                        <%--                                                    <c:if test="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}.contains(${customer.memberId})">--%>
                                                        <%--                                                                                                            <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                                                                            赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                                                                            </span>--%>

                                                        <%--                                                    </c:if>--%>

                                                        <%--                                                    ${carDetailVo.review_memberId[carReviewMap.key.reviewId].contains()}--%>
                                                        <%--                                                <c:forEach var="reviewid" items="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}" begin="0">--%>
                                                        <%--                                                    <c:if test="${customer.memberId eq reviewid}">--%>

                                                        <%--                                                        <c:set var="iscontain" value="true" />--%>
                                                        <%--                                                    </c:if>--%>
                                                        <%--                                                </c:forEach>--%>
                                                        <%--                                                <c:choose>--%>

                                                        <%--                                                    <c:when test="">    <!--如果 -->--%>

                                                        <%--                                                    </c:when>--%>

                                                        <%--                                                    <c:otherwise>  <!--否则 -->--%>

                                                        <%--                                                    </c:otherwise>--%>

                                                        <%--                                                </c:choose>--%>

                                                        <%--                                                <c:forEach var="reviewid" items="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}" begin="0">--%>
                                                        <%--                                                    <c:if test="${customer.memberId ne reviewid}">--%>
                                                        <%--                                                        <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                        </span>--%>
                                                        <%--                                                    </c:if>--%>
                                                        <%--                                                </c:forEach>--%>
                                                </a>
                                            </c:if>
                                            <c:if test="${empty customer}">
                                                <a class=""
                                                   href="${pageContext.request.contextPath}/customer/login.jsp">
                                                    <i class="i-praise"></i>


                                                        <%--                                                <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                    赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                    </span>--%>
                                                        <%--                                                <span class="praise-number">--%>
                                                        <%--                                                    <input type="hidden" value="${carReviewMap.key.reviewId}"/>--%>
                                                        <%--                                                    赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                </span>--%>


                                                        <%--&lt;%&ndash;                                                    ${carDetailVo.review_memberId[carReviewMap.key.reviewId]}&ndash;%&gt;--%>
                                                        <%--&lt;%&ndash;                                                <c:if test="${carDetailVo.review_memberId[carReviewMap.key.reviewId].contains(10001)}"></c:if>&ndash;%&gt;--%>
                                                        <%--                                                <c:set var="iscontain" value="" />--%>
                                                        <%--                                                <c:set var="exitId" value="10"></c:set>--%>

                                                    <c:set var="isMatch" scope="page">0</c:set>
                                                    <c:forEach var="reviewid"
                                                               items="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}">

                                                        <c:if test="${reviewid eq 0 && isMatch == 0}">
                                                        <span class="praise-number">
                                                            <input type="hidden" value="${carReviewMap.key.reviewId}"/>
                                                            赞( <label
                                                                class="pla">${carReviewMap.key.supportTotal}</label> )
                                                        </span>
                                                        </c:if>

                                                        <c:if test="${customer.memberId eq reviewid}">
                                                            <c:set var="isMatch" scope="page">1</c:set>
                                                            <%--                                                            <span class="praise-number hasPraise">--%>
                                                            <input type="hidden" value="${carReviewMap.key.reviewId}"/>
                                                            赞( <label
                                                                class="pla">${carReviewMap.key.supportTotal}</label> )
                                                            </span>
                                                        </c:if>

                                                    </c:forEach>


                                                        <%--                                                <!-- 测试值在集合中 -->--%>
                                                        <%--                                                <c:if test="${iscontain} ">--%>
                                                        <%--                                                    <span class="praise-number hasPraise" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                    已赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                    </span>--%>
                                                        <%--                                                </c:if>--%>
                                                        <%--                                                　　<!-- 测试值不在集合中 -->--%>
                                                        <%--                                                <c:if test="${!iscontain}">--%>
                                                        <%--                                                    <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                    赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                    </span>--%>
                                                        <%--                                                </c:if>--%>

                                                        <%--                                                    <c:if test="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}.contains(${customer.memberId})">--%>
                                                        <%--                                                                                                            <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                                                                            赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                                                                            </span>--%>

                                                        <%--                                                    </c:if>--%>

                                                        <%--                                                    ${carDetailVo.review_memberId[carReviewMap.key.reviewId].contains()}--%>
                                                        <%--                                                <c:forEach var="reviewid" items="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}" begin="0">--%>
                                                        <%--                                                    <c:if test="${customer.memberId eq reviewid}">--%>

                                                        <%--                                                        <c:set var="iscontain" value="true" />--%>
                                                        <%--                                                    </c:if>--%>
                                                        <%--                                                </c:forEach>--%>
                                                        <%--                                                <c:choose>--%>

                                                        <%--                                                    <c:when test="">    <!--如果 -->--%>

                                                        <%--                                                    </c:when>--%>

                                                        <%--                                                    <c:otherwise>  <!--否则 -->--%>

                                                        <%--                                                    </c:otherwise>--%>

                                                        <%--                                                </c:choose>--%>

                                                        <%--                                                <c:forEach var="reviewid" items="${carDetailVo.review_memberId[carReviewMap.key.reviewId]}" begin="0">--%>
                                                        <%--                                                    <c:if test="${customer.memberId ne reviewid}">--%>
                                                        <%--                                                        <span class="praise-number" onclick="getPraise(this,${carReviewMap.key.reviewId},${carReviewMap.key.supportTotal})">--%>
                                                        <%--                                                赞( <label class="pla">${carReviewMap.key.supportTotal}</label> )--%>
                                                        <%--                                                        </span>--%>
                                                        <%--                                                    </c:if>--%>
                                                        <%--                                                </c:forEach>--%>
                                                </a>
                                            </c:if>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>

                        </c:forEach>
                        <%--                        <div class="layui-row">--%>
                        <%--                            <div class="layui-col-md2 cust_icon">--%>
                        <%--                                <img src="${pageContext.request.contextPath}/image/car_detail_1.png">--%>
                        <%--                            </div>--%>

                        <%--                            <div class="layui-col-md10">--%>
                        <%--                                <div class="appraise_detail_text">--%>
                        <%--                                    <span>车辆评分：</span>--%>
                        <%--                                    <div id="cots_car1"></div>--%>
                        <%--                                    <span class="detail">评价：</span>--%>
                        <%--                                    <div>--%>
                        <%--                                        <span>尽管当时人多排队办理较慢，但办理手续的小妹妹非常nice, 根据我的要求增加了高速公路自动收费项目，价格有些小贵，但用起来省事了。取车时没有我预定的X3, 被 交车员小弟直接免费升级为X3, 意外惊喜。整个过程清晰，体验愉快。</span>--%>
                        <%--                                    </div>--%>
                        <%--                                </div>--%>
                        <%--                            </div>--%>
                        <%--                        </div>--%>
                        <%--                        <hr>--%>

                        <%--                        <div class="layui-row">--%>
                        <%--                            <div class="layui-col-md2 cust_icon">--%>
                        <%--                                <img src="${pageContext.request.contextPath}/image/car_detail_1.png">--%>
                        <%--                            </div>--%>


                    </div>
                </div>
            </div>
            <!--         右侧   -->
            <div class="layui-col-md4 hot_Selling_List ">
                <!--      热销商品        -->
                <h2>车型推荐</h2>


                <c:forEach var="carReviewMap" items="${pianhao}">
                    <a href="${pageContext.request.contextPath}/shop/${carReviewMap.shopId}/page/1?carId=${carReviewMap.carId}">
                        <div class="car-rlist">
                            <div class="car-rpic">
                                <img src="${pageContext.request.contextPath}${carReviewMap.carImage}" alt="">
                            </div>
                            <div class="car-rdesbox clear_float">
                                <div class="car-rdes">
                                    <div class="car-rname">${carReviewMap.carBrand}${carReviewMap.carName}</div>
                                    <div class="car-rtype">两厢 ${carReviewMap.carSeatCount}座 自动</div>
                                </div>
                                <div class="car-rprice">
                                    <span>￥</span>
                                    <i>${carReviewMap.carDailyPrice}</i>
                                    起/日
                                </div>
                            </div>

                        </div>
                    </a>

                </c:forEach>


            </div>
        </div>
    </div>
</div>

</body>


<script>

    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            , arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            , interval: 1800
            , anim: 'fade'
            , height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            , width: '580px'
            , height: '328px'
            , interval: 5000
        });

        //事件
        carousel.on('change(test4)', function (res) {
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function (othis) {
                var THIS = 'layui-bg-normal'
                    , key = othis.data('key')
                    , options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function () {
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function () {
            var value = this.value
                , options = {};
            if (!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });

</script>


<script>

    $(".praise").click(function (event) {
        console.log("开始任务")
        var ele = event.target;
        if (ele.className.indexOf("praise-number") != -1) {
            console.log("ele:" + ele.innerHTML);
            var reviewId = ele.firstElementChild.value;
            var praiseCount = ele.lastElementChild.innerText;
            console.log("评论id：" + reviewId);
            console.log("点赞数：" + praiseCount);
            getPraise(ele, reviewId, praiseCount);
        }

    })

    function getPraise(spanEle, reviewId, praiseCount) {
        console.log("评论id：" + reviewId);
        console.log("当前评论的点赞总数：" + praiseCount);
        // praiseCount++;
        var hasPraise = false;
        var styleList = spanEle.classList;

        for (var i = 0; i < styleList.length; i++) {
            console.log(styleList[i]);
            if (styleList[i] == "hasPraise") {//已经点赞，现在是取消点赞
                hasPraise = true;
            }
        }
        if (hasPraise) {
            praiseCount--;
            spanEle.lastElementChild.innerText = praiseCount;
            spanEle.classList.remove("hasPraise");
            var data = "reviewId=" + reviewId + "&supportStatus=0&supportCount=" + praiseCount;
            ;
            var url = '${pageContext.request.contextPath}' + "/praise/cancle";
            //取消点赞
            $.post(
                url,
                data,
                function (result) {
                    console.log("点赞后的结果是：" + result);
                },
                "json"
            )
        } else {
            praiseCount++;
            spanEle.lastElementChild.innerText = praiseCount;
            spanEle.classList.add("hasPraise");
            var data = "reviewId=" + reviewId + "&supportStatus=1&supportCount=" + praiseCount;
            var url = '${pageContext.request.contextPath}' + "/praise/save";
            //添加点赞
            $.post(
                url,
                data,
                function (result) {
                    console.log("点赞后的结果是：" + result);
                },
                "json"
            )
        }


    }
</script>

</html>
